<template>
  <el-dialog :title="title" custom-class="camera-dialog" :close-on-click-modal="false" :modal="false"
    :visible.sync="open" :before-close="handleClose">
    <el-scrollbar class="camera-scrollbar" wrap-class="camera-scrollbar__wrap">
      <el-form ref="form" inline :class="readonly ? 'detail' :'edit'" label-suffix=":" size="small" :rules="rules"
        :model="formData" hide-required-asterisk>
        <el-row class="row">
          <el-col :span="12">
            <el-form-item label="摄像头名称" prop="videoName">
              <el-input v-model="formData.videoName" :readonly="readonly"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="摄像头类型" prop="videoMode">
              <el-select v-model="formData.videoMode" popper-class='default-select-popper' :disabled="disabled">
                <el-option v-for="opt in modeOptions" :key="opt.value" :label="opt.label" :value="opt.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="12">
            <el-form-item label="Url" prop="url">
              <el-input v-model="formData.url" :readonly="readonly"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="传输方式" prop="gate">
              <el-select v-model="formData.gate" popper-class='default-select-popper' :disabled="disabled">
                <el-option v-for="opt in gateOptions" :key="opt.value" :label="opt.label" :value="opt.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="12">
            <el-form-item label="IP" prop="IPAddr">
              <el-input v-model="formData.IPAddr" :readonly="readonly"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="端口" prop="IPPort">
              <el-input v-model="formData.IPPort" :readonly="readonly"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="12">
            <el-form-item label="用户名" prop="userName">
              <el-input v-model="formData.userName" :readonly="readonly"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码" prop="userPwd">
              <el-input type="password" show-password v-model="formData.userPwd" :readonly="readonly"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="12">
            <el-form-item label="设备编号" prop="puid">
              <el-input v-model="formData.puid" :readonly="readonly"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="GPS编号" prop="gpsBH">
              <el-input v-model="formData.gpsBH" :readonly="readonly"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="视频组" prop="group" class="form-item-group">
          <div class="group-item" v-for="(item, index) in formData.group" :key="item.groupID">
            <svg-icon icon-class="remove" v-if="!readonly" @click="removeGroup(formData.group, index)"></svg-icon>
            <el-input :value="item.groupName || getGroupName(item)" readonly></el-input>
          </div>
          <div class="group-item add" v-if="!readonly">
            <svg-icon icon-class="plus" @click="addGroup()"></svg-icon>
            <label class="add-label" @click="addGroup()">添加所属组</label>
            <span class="valid-rule">{{groupValid}}</span>
          </div>
        </el-form-item>
        <div class="remark">
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" :rows="3" v-model="formData.remark" :readonly="readonly"></el-input>
          </el-form-item>
        </div>
      </el-form>
    </el-scrollbar>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleEdit(submitBtn)" :disabled="commitDisabled" size="small">{{ submitBtn ? '确 定' : '编 辑' }}
      </el-button>
      <el-button @click="handleClose" size="small">取 消</el-button>
    </div>
    <!-- 视频组选择 -->
    <div class="video-group-tree" v-show="showVideoGroupTree">
      <el-scrollbar class="tree-scrollbar" wrap-class="tree-scrollbar__wrap">
        <el-tree :data="videoGroupTreeData" icon-class="el-icon-arrow-right" node-key="nid" highlight-current
          @check-change="checkChange" show-checkbox check-strictly ref="videoGroupTree">
        </el-tree>
      </el-scrollbar>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'

import { modifySupplies } from '@/api/supplies'

export default {
  props: {
    open: Boolean,
    title: String,
    formData: Object,
  },

  computed: {
    ...mapGetters(['videoGroupMap', 'videoGroupTreeData']),
  },
  data() {
    return {
      readonly: true, // 详情时只读
      disabled: true,
      submitBtn: false,
      checkedPerson: [],
      modeOptions: [
        { label: 'RTSP', value: '0' },
        { label: 'MS-RTSP', value: '2' },
        { label: 'MS-POC', value: '3' },
        { label: 'HTTP', value: '5' },
        { label: 'Hikvision', value: '1' },
      ],
      gateOptions: [
        { label: 'UDP', value: '0' },
        { label: 'TCP', value: '1' },
      ],
      rules: {
        videoName: [
          { required: true, message: '摄像头名称不能为空', trigger: 'blur' },
        ],
        videoMode: [
          { required: true, message: '请选择摄像头类型', trigger: 'blur' },
        ],
        IPAddr: [
          { required: true, message: 'IP不能为空', trigger: 'blur' },
          {
            pattern: /^((25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9]).){3}(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])$/,
            message: 'IP格式错误',
          },
        ],
        IPPort: [
          { required: true, message: '端口不能为空', trigger: 'blur' },
          {
            pattern: /^(([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5]))$/,
            message: '请输入0-65535范围内的数字',
          },
        ],
      },

      groupValid: '', // 组校验信息
      commitDisabled: false, // 提交按钮

      showVideoGroupTree: false,
    }
  },
  watch: {
    'formData.group'(newValue) {
      if (newValue.length > 0) {
        this.groupValid = ''
      }
    },
  },
  methods: {
    // 选择框改变
    checkChange(node, checked) {
      if (checked) {
        if (
          !this.formData.group.some((g) => g.groupID === node.obj.videoGroupID)
        ) {
          this.formData.group.push({
            groupID: node.obj.videoGroupID,
            groupName: node.obj.groupName,
          })
        }
      } else {
        for (let i = 0; i < this.formData.group.length; i++) {
          const g = this.formData.group[i]
          if (g.groupID === node.obj.videoGroupID) {
            this.formData.group.splice(i, 1)
            break
          }
        }
      }
    },
    // 添加按钮
    addGroup() {
      this.showVideoGroupTree = true
      this.$nextTick(() => {
        this.formData.group.forEach((item) => {
          let node = this.videoGroupMap.get(item.groupID)
          if (node) {
            this.$refs.videoGroupTree.setChecked(node.nid, true)
          }
        })
      })
    },
    // 删除按钮
    removeGroup(group, index) {
      group.splice(index, 1)
    },
    getGroupName(item) {
      let group = this.videoGroupMap.get(item.groupID)
      if (group) item.groupName = group.obj.groupName
      return item.groupName || ''
    },
    // 按钮是否禁用
    toolBtnDistabled() {
      if (this.formData.type === 'label') {
        return this.formData.personList.length > 0
      }
      return false
    },
    //编辑
    handleEdit(submitBtn) {
      if (!submitBtn) {
        this.readonly = false
        this.disabled = false
        this.submitBtn = true
      } else {
        let form = this.formData
        this.commitDisabled = true
        this.$refs['form'].validate((valid) => {
          if (valid) {
            if (form.group.length === 0) {
              this.commitDisabled = false
              this.groupValid = '请选择视频组'
              return
            }
            // 提交表单
            SDK.videoInfoMod(form)
              .then((res) => {
                this.handleClose()
              })
              .catch((err) => {
                console.log(err)
                this.commitDisabled = false
              })
          } else {
            this.commitDisabled = false
          }
        })
      }
    },
    // 关闭或取消
    handleClose() {
      this.$emit('update:open', false)
    },
    // 监听鼠标事件
    clickEvent(e) {
      var box = document.getElementsByClassName('video-group-tree')[0]
      if (box && !box.contains(e.target)) {
        this.showVideoGroupTree = false
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      document.addEventListener('click', this.clickEvent, true)
    })
  },
  destroyed() {
    document.removeEventListener('click', this.clickEvent, true)
  },
}
</script>

<style lang="scss" scoped>
@import '~@/assets/scss/camera_dialog.scss';
</style>
